<template>
    <div class="app-container order_list">
        
        <transition name="el-zoom-in-top">
        <div class="status_main" v-show="showStatus">
            <div :class="{ 'active': index === currentIndex }" class="status_item"
                v-for="(item, index) in order_status" :key="item.id" @click="itemClick(item, index)">
                <span>{{ item.label }} </span>(
                <span class="num">1000</span>)
            </div>
        </div>
        </transition>
        <el-card shadow="never" v-show="showSearch">
            <template #header>
                <div  class="p20">
                <i class="el-icon-search mr10"></i>
                <span>筛选结果</span>
                <div class="button-main">
                    <div class="button_item">查询结果</div>
                    <div class="button_item" @click="showSearchForm">高级搜索</div>
                </div>
                <div class="hide_status" @click="showStatus = !showStatus">
                    <i class="el-icon-arrow-down" v-if="!showStatus"></i>
                    <i class="el-icon-arrow-up" v-if="showStatus"></i>
                    <span>{{ showStatus ? '收起筛选' : '打开筛选' }}</span>
                </div>
            </div>
            </template>
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
                <el-form-item label="输入搜索" prop="orderNo">
                    <el-input v-model="queryParams.orderNo" placeholder="服务号" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="收货人" prop="orderNo">
                    <el-input v-model="queryParams.orderNo" placeholder="收货人姓名/手机号" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="申请时间">
                    <el-date-picker v-model="queryParams.time" style="width: 100%" value-format="yyyy-MM-dd" type="datetime"
                        format="yyyy-MM-dd" @change="handleQuery" placeholder="选择申请时间"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="handleQuery">搜索</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="box-card"  shadow="never" :body-style="{ padding: '20px' }">
            <template #header>
                <div  class="p20">
                    <i class="el-icon-s-grid mr10"></i>
                    <span>数据列表</span>
                    <div class="button-main">
                        <el-button type="primary" @click="handleDownload">导出数据</el-button>
                    </div>
                </div>
            </template>
            <el-table border v-loading="loading" :data="dataSource" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" :selectable="selectHandle" />
                <el-table-column label="#" type="index"> </el-table-column>
                <el-table-column label="服务号" align="center" prop="orderNo" width="150" />
                <el-table-column label="申请时间" align="center" prop="addTime" width="80" />
                <el-table-column label="退款金额" align="center" prop="nickName" />
                <el-table-column label="联系人" align="center" prop="allTotalAmount" />
                <el-table-column label="申请状态" align="center" prop="createTime" />
                <el-table-column label="处理时间" align="center" prop="createTime" >
                    <template #default="scope">
                        {{ selectDictLabel(order_source,scope.row.orderSource) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="text"  @click="handleView(scope.row.id)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page.sync="queryParams.pageNum"
                v-model:limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-card>
        <!-- <addForm ref="modelForm" @ok="getList"></addForm>
        <printDeliverForm ref="printDeliverForm"></printDeliverForm>
        <printShipping ref="printShipping"></printShipping>
        <downloadAllocation ref="downloadAllocation"></downloadAllocation>
        <batchDeliverForm ref="batchDeliverForm"></batchDeliverForm>
        <searchForm ref="searchForm"></searchForm> -->
    </div>
</template>
  
<script>
// import addForm from './modules/addForm.vue';
// 打印快递单
// import printDeliverForm from './modules/printDeliverForm.vue';
// // 打印发货单
// import printShipping from './modules/printShipping.vue';
// // 下载配货单
// import downloadAllocation from './modules/downloadAllocation.vue';
// // 批量发货
// import batchDeliverForm from './modules/batchDeliverForm.vue';
// 高级搜索
// import searchForm from './modules/searchForm.vue';
import listMixin from '@/mixins/listMixin';
export default {
    name: "salesReturn",
    components: {
        // addForm,printDeliverForm,printShipping,downloadAllocation,batchDeliverForm,
        // searchForm
    },
    mixins: [listMixin],
    dicts: ["order_status","order_source"],
    data() {
        return {
            queryParams: {
                orderNo: '',
                pageNum: 1,
                pageSize: 10
            },
            showStatus:true,
            currentIndex: 0,
            order_status: [],
            order_source: [],
            urls: {
                list: '/goods/orders/list',
                delete: '/goods/orders',
            },
        };
    },
    mounted () {
        this.getDicts(["order_status","order_source"]);
    },
    methods: {
        handleView(row) {
            window.open(`/goods/order/view/${row.id}`);
        },
        itemClick(item, index) {
            this.currentIndex = index;
        },
        printDeliver(id) {
            this.$refs.printDeliverForm.show(id);
        },
        printShippingOrder() {
            this.$refs.printShipping.show();
        },
        handleDownload() {
            this.$refs.downloadAllocation.show();
        },
        handleDeliver() {
            this.$refs.batchDeliverForm.show();
        },
        showSearchForm() {
            this.$refs.searchForm.show();
        }

    },
};
</script>
<style type="text/css" lang="scss" scoped>
.app-container {
    background-color: #F9F9F9;
    color: #666;
    min-height: calc(100vh - 84px);
}

.status_main {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.status_item {
    padding: 8px 16px;
    cursor: pointer;
    border: 1px solid #E4E4E4;
    margin-right: 10px;
    color: #666;
    background-color: #fff;
}

.status_item.active {
    background-color: #409eff;
    color: #fff;
}

.num {
    color: #f56c6c;
}

.active .num {
    color: #fff;
}

.button-main {
    float: right;
    margin-top: -10px;
}

.button_item:not(:last-child) {
    border-right: none;
}

.button_item {
    padding: 8px 16px;
    cursor: pointer;
    border: 1px solid #E4E4E4;
    color: #409eff;
    background-color: #fff;
    display: inline-block;
}
.button_item:hover {
    background-color: #409eff;
    color: #fff;
    cursor: pointer;
}
.p20{
    padding: 6px 0;
}
.hide_status{
    float: right;
    margin-right: 10px;
    color: #409eff;
    cursor: pointer;
    i{
        margin-right: 4px;
        color: #409eff;
    }
}
.box-card {
    margin-top: 10px;
}
</style>

<style type="text/css">
.order_list .el-card__header {
    background-color: #f5f7fa;
}
</style>